<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="javascript">
        <script type="text/javascript">
            function handleDrop(event, ui) {
                var droppedActivity = ui.draggable;

                droppedActivity.fadeOut('fast');
            }
        </script>
    </ui:define>

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryEditDailyItineraryManagedBean.initView}"/>
        <p:menubar model="#{itineraryEditDailyItineraryManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryEditDailyItineraryManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">                                     

        <p:panel id="createDIYPanel" header="#{bundle['itinerary.createDIY.panel']} #{itineraryEditDailyItineraryManagedBean.dayDate}" >
            <p:messages id="statusMessages"/>

            <h:panelGrid columns="3" cellpadding="5">
                <h:outputLabel id="itineraryDayDateLabel" value="#{bundle['dailyItinerary.dayDate.label']}" style="font-weight: bold"/>
                <h:outputText id="dayDate" value="#{itineraryEditDailyItineraryManagedBean.dayDate}" />
                <p:message for="dayDate" />
            </h:panelGrid>

            <h:panelGrid columns="2" cellpadding="5">
                <p:fieldset legend="#{bundle['dailyItinerary.stakeholders.label']}">
                    <p:dataGrid id="availableStakeholders" var="stakeholder"  
                                value="#{itineraryEditDailyItineraryManagedBean.stakeholdersList}" columns="2" > 

                        <p:column>
                            <p:draggable for="stakeholder" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel" >
                                <p:panel id="stakeholder" header="#{stakeholder.corpName}" >
                                    <h:panelGrid columns="1">
                                        <p:graphicImage id="stakeholderImage" value="#{stakeholder.imgUrl}" width="100px" height="100px" />
                                        <h:outputText value="#{stakeholder.industry}" />
                                    </h:panelGrid>
                                </p:panel>
                            </p:draggable>
                        </p:column>

                    </p:dataGrid>  
                </p:fieldset>  

                <p:fieldset legend="#{bundle['dailyItinerary.attractions.label']}">
                    <p:dataGrid id="availableAttractions" var="attraction"  
                                value="#{itineraryEditDailyItineraryManagedBean.attractionsList}" columns="2" > 

                        <p:column>
                            <p:draggable for="attraction" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel" >
                                <p:panel id="attraction" header="#{attraction.localizedActivityName}" >
                                    <h:panelGrid columns="1">
                                        <p:graphicImage id="attractionImage" value="/#{attraction.imgUrl}" width="100px" height="100px" />
                                        <h:outputText value="#{attraction.localizedSingaporeArea}" />
                                        <h:outputText value="#{attraction.localizedActivityType}" />
                                    </h:panelGrid>
                                </p:panel>
                            </p:draggable>
                        </p:column>

                    </p:dataGrid>  
                </p:fieldset>

            </h:panelGrid>

            <p:fieldset legend="Activities Selected" styleClass="slot" >
                <p:droppable id="dropArea" tolerance="pointer"
                             onDropUpdate="selectedItem availableAttractions"
                             dropListener="#{itineraryEditDailyItineraryManagedBean.elementsDropped}"
                             activeStyleClass="slotActive"
                             datasource="availableAttractions availableStakeholders"
                             onDrop="handleDrop">

                    <p:outputPanel id="activitiesSelected" styleClass="slot" >

                        <p:dataTable id="selectedItem" var="itinerarySlotState" value="#{itineraryEditDailyItineraryManagedBean.selectedList}" >

                            <p:column headerText="#{bundle['itinerary.selectedActivities.header']}">  
                                <h:outputText value="#{itinerarySlotState.localizedActivityName}" />  
                            </p:column>  

                            <p:column headerText="#{bundle['itinerarySlot.startTime.label']}">  
                                <h:selectOneMenu value="#{itinerarySlotState.time24HstartTime}" converter="time24HConverter">
                                    <f:selectItems value="#{enumTime24H.listItems}"/>
                                </h:selectOneMenu>
                            </p:column>

                            <p:column headerText="#{bundle['itinerarySlot.endTime.label']}">  
                                <h:selectOneMenu value="#{itinerarySlotState.time24HendTime}" converter="time24HConverter" >
                                    <f:selectItems value="#{enumTime24H.listItems}"/>
                                </h:selectOneMenu>
                            </p:column>

                            <p:column style="width:100px">  
                                <p:commandButton update="touristForm:display" oncomplete="confirmDeleteElements.show()" image="ui-icon ui-icon-close" title="Delete">  
                                    <f:setPropertyActionListener id="selectedActivity" value="#{itinerarySlotState}" target="#{itineraryEditDailyItineraryManagedBean.selectedSlot}" />  
                                </p:commandButton>
                            </p:column>  


                        </p:dataTable>

                        <p:confirmDialog message="#{bundle['itinerary.removeActivity.message']}" width="200"  
                                         showEffect="explode" hideEffect="explode"  
                                         header="#{bundle['itinerary.confirmation.header']}" severity="alert" widgetVar="confirmDeleteElements">  

                            <p:commandButton value="#{bundle['itinerary.ok.button']}" update="selectedItem" actionListener="#{itineraryEditDailyItineraryManagedBean.deleteElements}" oncomplete="confirmDeleteElements.hide()"/>  
                            <p:commandButton value="#{bundle['itinerary.cancel.button']}" onclick="confirmDeleteElements.hide()" type="button" />  
                        </p:confirmDialog>

                        <p:commandButton id="btnSubmitPanel" actionListener="#{itineraryEditDailyItineraryManagedBean.updateItineraryItems}" value="#{bundle['itinerary.confirmItineraryItems.button']}" ajax="true" update="statusMessages activitiesSelected"/>
                    </p:outputPanel> 

                </p:droppable>                                       
            </p:fieldset>

        </p:panel>

    </ui:define>  


</ui:composition>
